import { ref,h } from 'vue'

/**
 * In a real world example you would want to avoid creating refs in a global scope like this
 */
const isVisible = ref(false)
const message = ref('')
let resolveCallback: (value: unknown) => void

export function dialogMsg(id: any) {
  return h(
    'span',
    {
      style: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        gap: '8px',
      },
    },
    [`Are you sure?`, h('br'), h('span', `[ELEMENT_ID: ${id}]`)],
  )
}
export function useDialogState() {
  return {
    isVisible,
    message,
    resolve: (value?: unknown) => {
      if (resolveCallback) {
        resolveCallback(value)
      }
    },
  }
}

export default function useDialog() {
  return {
    confirm(msg: any|string) {
      isVisible.value = true
      message.value = msg
      return new Promise((resolve) => {
        resolveCallback = resolve
      })
    },
  }
}